<template>
  <el-container>
    <el-header>
      <p style="font-size:24px;font-style:inherit; padding-top: 30px;">
        视频分区
        <el-button
          style="float:right"
          type="primary"
          icon="el-icon-plus"
          @click="addVideoPartion()"
          circle
        ></el-button>

        <el-dialog title="视频分区" :visible.sync="dialogVideoFormVisible">
          <el-form :model="form">
            <el-form-item label="分区名称" :label-width="formLabelWidth">
              <el-input
                v-model="form.name"
                autocomplete="off"
                @keyup.enter.native="partionSaveOrUpdate(partionId)"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVideoFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="partionSaveOrUpdate(partionId)">确 定</el-button>
          </div>
        </el-dialog>
      </p>
    </el-header>
    <el-divider></el-divider>
    <el-main>
      <ul v-for="item in videoList" :key="item.partionId">
        <li style="float:left" class="item">
          {{item.partionName}}
          <el-divider direction="vertical"></el-divider>
          <el-button-group style="padding-bottom:4px">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="videoPartion(item.partionId)"
              circle
              plain
            ></el-button>
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-delete"
              @click="partionDelete(item.partionId)"
              circle
              plain
            ></el-button>
          </el-button-group>
        </li>
      </ul>
    </el-main>
    <el-header>
      <p style="font-size:24px;font-style:inherit; padding-top: 30px;">
        专栏分区
        <el-button
          style="float:right"
          type="primary"
          icon="el-icon-plus"
          @click="addArticlePartion()"
          circle
        ></el-button>
        <el-dialog title="专栏分区" :visible.sync="dialogArticleFormVisible">
          <el-form :model="form">
            <el-form-item label="分区名称" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogArticleFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="partionSaveOrUpdate(partionId)">确 定</el-button>
          </div>
        </el-dialog>
      </p>
    </el-header>
    <el-divider></el-divider>
    <el-main>
      <ul v-for="item in articleList" :key="item.partionId">
        <li style="float:left" class="item">
          {{item.partionName}}
          <el-divider direction="vertical"></el-divider>

          <el-button-group style="padding-bottom:4px">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="articlePartion(item.partionId)"
              circle
              plain
            ></el-button>

            <el-button
              type="primary"
              size="mini"
              icon="el-icon-delete"
              @click="partionDelete(item.partionId)"
              circle
              plain
            ></el-button>
          </el-button-group>
        </li>
      </ul>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "partionmanage",
  data() {
    return {
      partionId: "",
      partionName: "",
      partionType: "",
      dialogArticleFormVisible: false,
      dialogVideoFormVisible: false,
      formLabelWidth: "120px",
      form: {
        name: ""
      },
      videoList: [{ partionId: "123", partionName: "woshi6" }],
      articleList: [{ partionId: "", partionName: "" }]
    };
  },
  created() {
    this.getVideoList();
    this.getArticleList();
  },

  methods: {
    partionDelete(partionId) {
      this.$confirm(
        "是否删除该分区（不会删除已经在该分区已经发布的视频）\t 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          this.axios({
            method: "get",
            params: {
              id: partionId
            },
            url: "http://localhost:8092/partion/delete"
          })
            .then(res => {
              this.getVideoList();
              this.getArticleList();
              this.$message({
                type: "success",
                message: "删除成功!"
              });
            })
            .catch(e => {
              this.$message.error(e.response.data.message);
           
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    partionSaveOrUpdate(partionId) {
      if (this.form.name === "" || this.form.name === null) {
        this.$message({
          type: "warning",
          message: "分区内容不能为空!"
        });
        return;
      }
     
      this.axios({
        method: "post",
        params: {
          partionId: partionId === "" ? null : partionId,
          partionName: this.form.name,
          partionType: this.partionType === "video" ? "video" : "article"
        },
        url: "http://localhost:8092/partion/saveOrUpdatePartion"
      })
        .then(r => {
          this.dialogArticleFormVisible = false;
          this.dialogVideoFormVisible = false;

          this.getVideoList();
          this.getArticleList();

          this.$message({
            type: "success",
            message: "操作成功！"
          });
        })
        .catch(e => {
          this.$message.error(e.response.data.message);
        
        });
    },
    videoPartion(partionId) {
      this.partionId = partionId;
      this.dialogVideoFormVisible = true;
      this.partionType = "video";
    },
    articlePartion(partionId) {
      this.partionId = partionId;
      this.dialogArticleFormVisible = true;
      this.partionType = "article";
    },
    addVideoPartion() {
      this.partionId = "";
      this.dialogVideoFormVisible = true;
      this.partionType = "video";
    },
    addArticlePartion() {
      this.partionId = "";
      this.dialogArticleFormVisible = true;
      this.partionType = "article";
    },
    getVideoList() {
      this.axios({
        method: "post",
        params: {
          currentPage: 1,
          pageSize: 1000,
          type: "video"
        },
        url: "http://localhost:8092/partion/getPartionList"
      })
        .then(res => {
    
          this.videoList = res.data;
        })
        .catch(e => {
         this.$message.error(e.response.data.message);
        });
      console.log(this.videoList);
    },
    getArticleList() {
      this.axios({
        method: "post",
        params: {
          currentPage: 1,
          pageSize: 1000,
          type: "article"
        },
        url: "http://localhost:8092/partion/getPartionList"
      })
        .then(res => {
          this.articleList = res.data;
        })
        .catch(e => {
         this.$message.error(e.response.data.message);
        });
    }
  }
};
</script>
<style   scoped>
.item {
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  padding-top: 3px;
  padding-left: 8px;
  padding-right: 8px;
  font-size: 20px;
  margin: 10px;
}
</style>